<!-- 试复样管理 -->
<template>
  <PageTabelLayout>
    <template #pageHeader>
      <div class="my-header" v-if="headerShow">
        <div class="search-form" style="padding: 10px; box-sizing: border-box">
          <a-form size="small" :model="pageData">
            <a-row :gutter="16">
              <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item
                  label="开始时间:"
                  :label-col-flex="pageData.labelColFlex"
                  field="craftType"
                  :validate-trigger="['change', 'blur']"
                >
                  <a-date-picker  popup-container="html" 
                    class="bacClass"
                    v-model="dataForm1.startDate"
                    allow-clear
                    style="width: 270px"
                  />
                </a-form-item>
              </a-col>
              <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item
                  label="结束时间"
                  :label-col-flex="pageData.labelColFlex"
                  field="dateEnd"
                >
                  <a-date-picker  popup-container="html" 
                    class="bacClass"
                    v-model="dataForm1.endDate"
                    allow-clear
                    style="width: 270px"
                  />
                </a-form-item>
              </a-col>
              <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="客户名称" :label-col-flex="pageData.labelColFlex">
                  <a-select popup-container="html" 
                    style="width: 270px"
                    class="bacClass"
                    allow-search
                    :filter-option="false"
                    @focus="selectAwait('', 1)"
                    @search="selectAwait($event, 1)"
                    v-model="dataForm1.customerName"
                  >
                    <a-option
                      v-for="item in pageData.nameList1"
                      :key="item.id"
                      :value="item.customName"
                      >{{ item.customName }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="色号" :label-col-flex="pageData.labelColFlex">
                  <a-select popup-container="html" 
                    style="width: 270px"
                    class="bacClass"
                    allow-search
                    :filter-option="false"
                    @focus="selectAwait('', 3)"
                    @search="selectAwait($event, 3)"
                    v-model="dataForm1.colourNumber"
                  >
                    <a-option
                      v-for="item in pageData.nameList3"
                      :key="item.id"
                      :value="item.colourNumber"
                      >{{ item.colourNumber }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="色称" :label-col-flex="pageData.labelColFlex">
                  <a-select popup-container="html" 
                    style="width: 270px"
                    class="bacClass"
                    allow-search
                    :filter-option="false"
                    @focus="selectAwait('', 4)"
                    @search="selectAwait($event, 4)"
                    v-model="dataForm1.colorAccording"
                  >
                    <a-option
                      v-for="item in pageData.nameList4"
                      :key="item.id"
                      :value="item.colorAnomia"
                      >{{ item.colorAnomia }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="复样类型" :label-col-flex="pageData.labelColFlex">
                  <a-select popup-container="html" 
                    style="width: 270px"
                    class="bacClass"
                    allow-search
                    :filter-option="false"
                    @focus="selectAwait('', 5)"
                    @search="selectAwait($event, 5)"
                    v-model="dataForm1.checkerType"
                  >
                    <a-option
                      v-for="item in pageData.nameList5"
                      :key="item.id"
                      :value="item.duplicateType"
                      >{{ item.duplicateType }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="复样员" :label-col-flex="pageData.labelColFlex">
                  <a-select popup-container="html" 
                    style="width: 270px"
                    class="bacClass"
                    allow-search
                    :filter-option="false"
                    @focus="selectAwait('', 6)"
                    @search="selectAwait($event, 6)"
                    v-model="dataForm1.checker"
                  >
                    <a-option
                      v-for="item in pageData.nameList6"
                      :key="item.id"
                      :value="item.name"
                      >{{ item.name }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="流转卡号" :label-col-flex="pageData.labelColFlex">
                  <a-select popup-container="html" 
                    style="width: 270px"
                    class="bacClass"
                    allow-search
                    :filter-option="false"
                    @focus="selectAwait('', 7)"
                    @search="selectAwait($event, 7)"
                    v-model="dataForm1.roamCard"
                  >
                    <a-option
                      v-for="item in pageData.nameList7"
                      :key="item.id"
                      :value="item.flowCardCode"
                      >{{ item.flowCardCode }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="进度类型" :label-col-flex="pageData.labelColFlex">
                  <a-select popup-container="html" 
                    style="width: 270px"
                    class="bacClass"
                    allow-search
                    :filter-option="false"
                    @focus="selectAwait('', 2)"
                    @search="selectAwait($event, 2)"
                    v-model="dataForm1.speedType"
                  >
                    <a-option
                      v-for="item in pageData.nameList2"
                      :key="item.id"
                      :value="item.scheduleType"
                      >{{ item.scheduleType }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="复样情况" :label-col-flex="pageData.labelColFlex">
                  <a-select popup-container="html" 
                    v-model="dataForm1.duplicateType"
                    placeholder="选择复样情况"
                    style="width: 270px"
                    allow-clear
                    class="bacClass"
                  >
                    <a-option :value="0">已完成</a-option>
                    <a-option :value="1">未完成</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="是否加急" :label-col-flex="pageData.labelColFlex">
                  <a-select popup-container="html" 
                    v-model="dataForm1.duplicateJJ"
                    placeholder="选择加急情况"
                    allow-clear
                    style="width: 270px"
                    class="bacClass"
                  >
                    <a-option :value="0">加急</a-option>
                    <a-option :value="1">正常</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="changHeadShow(false)"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar" style="padding-bottom: 10px">
        <Toolbar :items="['查询', '新增']" @select="selectHandler" @add="addHandler" />
      </div>
    </template>
    <template #pageTabel>
      <div style="height: 100%; overflow-y: scroll">
        <a-tag size="large" color="#168cff" style="margin-bottom: 10px">多样试复样列表</a-tag>
        <AgGridVuesCopys
          :rowHeight="33"
          :headerHeight="33"
          :suppressCopyRowsToClipboard="true"
          rowSelection="multiple"
          @grid-ready="gridReady"
          style="height: 80%"
          class="ag-theme-alpine"
          :defaultColDef="defaultColDef"
          :rowData="table.dataList"
          :columnDefs="cfsValue"
          :localeText="localeTextData"
        />
        <paginationCopys
          :total="total"
          show-total
          show-jumper
          show-page-size
          @change="changePage"
          @page-size-change="changeSize"
          style="justify-content: center; margin-top: 10px"
          :page-size="pagination.pageSize"
          :current="pagination.page"
        />
        <div style="margin: 10px">
          <a-button
            :type="circumStatus === 0 ? 'primary' : 'outline'"
            style="margin-right: 20px"
            @click="changeCircums(0)"
            >明细列表</a-button
          >
          <a-button :type="circumStatus === 1 ? 'primary' : 'outline'" @click="changeCircums(1)"
            >汇总列表</a-button
          >
        </div>
        <!-- 明细列表 -->
        <testDupDetail v-if="circumStatus === 0" />
        <!-- 汇总列表 -->
        <testDupSummaryList v-if="circumStatus === 1" />
      </div>
    </template>
    <a-drawer
      :drawer-style="{ zIndex: 9999 }"
      height="100%"
      unmountOnClose
      :visible="pageData.showAdd"
      :mask-closable="false"
      placement="bottom"
      @cancel="pageData.showAdd = false"
    >
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <!-- 登记列表新增编辑 -->
      <dup-sample-register-add
        :pageData="pageData"
        @search-handler="searchHandler"
        @select-await="selectAwait"
        ref="dupRegAdd"
        :dataForm="dataForm"
      />
      <template #footer>
        <a-button size="mini" @click="pageData.showAdd = false"> 关闭 </a-button>
        <a-button type="primary" size="mini" @click="saveHandler"> 保存 </a-button>
        <a-button
          type="primary"
          status="warning"
          size="mini"
          @click="dyBoufeiHandler"
          v-if="dataForm.id"
        >
          打印
        </a-button>
      </template>
    </a-drawer>
    <a-drawer
      :drawer-style="{ zIndex: 9999 }"
      height="50%"
      unmountOnClose
      :visible="pageData.showPrint"
      :mask-closable="false"
      placement="bottom"
      @cancel="pageData.showPrint = false"
    >
      <template #title>
        <a-row style="width: 100%; box-sizing: border-box">
          <a-col flex="100px"> 打印预览 </a-col>
        </a-row>
      </template>
      <div id="printCont" class="printCont">
        <h3 class="Head3">肇庆市粤隆纺织有限公司</h3>
        <div class="secondTitle">
          <div style="flex: 1; text-align: left">日期: {{ pageData.printData.printDate }}</div>
          <div style="flex: 1; text-align: center">复样单台账</div>
          <div style="flex: 1; text-align: right">页码: 1</div>
        </div>
        <div class="headTop">
          <table class="mytable">
            <thead>
              <tr>
                <th>坯布名称</th>
                <th>色称</th>
                <th>色号</th>
                <th>确认色</th>
                <th>重量</th>
                <th>复样员</th>
                <th>复样要求</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td :colspan="7"> 客户名称: </td>
              </tr>
              <tr v-for="item in pageData.printData.roamData">
                <td>{{ item.grayName }}</td>
                <td>{{ item.colorAccording }}</td>
                <td>{{ item.colourNumber }}</td>
                <td>{{ item.colorConfirmation }}</td>
                <td>{{ item.flowCardWeight }}</td>
                <td>{{ item.checker }}</td>
                <td>{{ item.duplicateExplain }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <template #footer>
        <div style="text-align: center"
          ><a-button @click="pageData.showPrint = false">关闭</a-button>
          <a-button @click="vPrintClick" style="margin-left: 20px" type="primary">打印</a-button>
        </div>
      </template>
    </a-drawer>
  </PageTabelLayout>
</template>
<script lang="ts">
  import { ref, reactive, unref, onMounted } from 'vue'
  import { post, get } from '@/api/http'
  
  import { localeText } from '@/api/aggridZw'
  import emitter from '@/hooks/useEventBus'
  import { dupSchedule, dupSmapleReg, dupType, trialDupSample } from '@/api/laboratory'
  import { usePagination, useTable } from '@/hooks/table'
  import { Message } from '@arco-design/web-vue'
  import { orderFn } from '@/api/laboratory/other'
  import PageTabelLayout from '../pageTabelLayout.vue'
  import printJS from 'print-js'
  import dayjs from 'dayjs'
  export default {
    name: 'testDupSamples',
    components: { PageTabelLayout },
    setup() {
      let headerShow = ref<boolean>(true)
      let changHeadShow = (boolVal: boolean) => {
        headerShow.value = boolVal
        emitter.emit('window-change')
      }
      const dataForm: any = ref({})
      const circumStatus = ref(0)
      const dupSmapleRegApi = dupSmapleReg()
      onMounted(() => {
        // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
        doRefresh()
        emitter.on('refresh-testDupSamples', () => {
          doRefresh()
          // gridOption.value.sizeColumnsToFit();
        })
        emitter.emit('refresh-testDupDetail')
      })
      const changeCircums = (status: number) => {
        circumStatus.value = status
        // console.log(status);
        if (status === 0) {
          emitter.emit('refresh-testDupDetail')
        } else {
          emitter.emit('refresh-testDupSummaryList')
        }
      }
      //
      const selectHandler = () => {
        doRefresh()
      }

      const saveHandler = () => {
        emitter.emit('saveHandler', async (status: boolean, dataForm: any) => {
          if (status) {
            let res: any = null
            if (!dataForm.id) {
              res = await dupSmapleReg().addDupSmapleReg([{ ...dataForm }])
            } else {
              res = await dupSmapleReg().editDupSmapleReg([{ ...dataForm }])
            }
            if (res.code === 200) {
              pageData.showAdd = false
              Message.success('操作成功')
              doRefresh()
            } else {
              Message.error(res.message)
            }
          }
        })
      }

      const dyBoufeiHandler = async () => {
        // pageData.showPrint = true;
        // console.log();
        await dupSmapleRegApi
          .getPrintDupSmaple({ roamCard: dataForm.value.roamCard })
          .then((res: any) => {
            if (res.code === 200) {
              pageData.showPrint = true
              pageData.printData.roamData = res.data
              pageData.printData.printDate = dayjs(new Date()).format('YYYY-MM-DD')
            } else {
              Message.error({
                content: res.message,
                duration: 5000,
              })
            }
          })
      }
      const addHandler = () => {
        pageData.showAdd = true
        dataForm.value = {}
        pageData.sideTitle = '新增多样试复样'
      }
      const pageData = reactive<{
        pageLoading: boolean
        showAdd: boolean
        sideTitle: string

        showPrint: boolean
        printData: any
        nameList1: any[]
        nameList2: any[]
        nameList3: any[]
        nameList4: any[]
        nameList5: any[]
        nameList6: any[]
        nameList7: any[]
        labelColFlex: any
      }>({
        pageLoading: false,
        showAdd: false,
        sideTitle: '',
        labelColFlex: '100px',
        showPrint: false,
        printData: {},
        nameList1: [],
        nameList2: [],
        nameList3: [],
        nameList4: [],
        nameList5: [],
        nameList6: [],
        nameList7: [],
      })
      const dataForm1: any = reactive({
        startDate: '',
        endDate: '',
        customerName: '',
        colourNumber: '',
        colorAccording: '',
        checkerType: '',
        checker: '',
        roamCard: '',
        speedType: '',
        duplicateType: '',
        duplicateJJ: '',
      })
      //下拉数据
      const options = ref<any>()
      const loading = ref(false)
      const selectAwait = (val: any, num: any) => {
        if (num == 1) {
          post({
            url: 'aps/custom/getDropValue',
            data: { customName: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList1 = data
            }
          })
        } else if (num == 2) {
          post({
            url: 'pdm/duplicateSchedule/getFieldValue1',
            data: { scheduleType: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList2 = data
            }
          })
        } else if (num == 3) {
          post({
            url: 'pdm/proofingManage/getFieldValue1',
            data: { colourNumber: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList3 = data
            }
          })
        } else if (num == 4) {
          post({
            url: 'pdm/proofingManage/getFieldValue1',
            data: { colorAnomia: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList4 = data
            }
          })
        } else if (num == 5) {
          post({
            url: 'pdm/duplicateType/getFieldValue1',
            data: { duplicateType: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList5 = data
            }
          })
        } else if (num == 6) {
          post({
            url: 'org/hrEmployee/getFieldValue1',
            data: { name: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList6 = data
            }
          })
        } else if (num == 7) {
          post({
            url: 'aps/circulatCard/getDropValue',
            data: { flowCardCode: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList7 = data
            }
          })
        }
      }
      const doRefresh = async () => {
        pageData.pageLoading = true
        // await dupSmapleRegApi.gePageDupSmapleRegList({
        //     page: pagination.page,
        //     size: pagination.pageSize,
        //     deleteState: 0
        // })
        await post({
          url: 'pdm/duplicateSampleRegister/selectPage',
          data: {
            page: pagination.page,
            size: pagination.pageSize,
            deleteState: 0,
            ...dataForm1,
          },
        })
          .then(({ code, data }: any) => {
            if (code === 200) {
              table.handleSuccess(data.list)
              pagination.setTotalSize(data.total)
              total.value = data.total
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
      }

      const editHandler = (record: any) => {
        pageData.showAdd = true
        pageData.sideTitle = '编辑多样试复样信息'
        for (var key in record) {
          dataForm.value[key] = record[key]
        }
      }

      //多样试复样列表表格
      const gridOption = ref()
      const gridReady = (params: any) => {
        gridOption.value = params.api
      }
      const defaultColDef = {
        sortable: true,
        resizable: true,
        filter: true,
        // flex: 1,
        width: 150,
      }
      const cfsValue = [
        {
          headerName: '登记日期',
          field: 'recordDate',
        },
        {
          headerName: '计划单号',
          field: 'planAdd',
        },
        {
          headerName: '流转卡号',
          field: 'roamCard',
        },
        {
          headerName: '生产车间',
          field: 'worksho',
        },
        {
          headerName: '进度类型',
          field: 'speedType',
        },
        {
          headerName: '客户姓名',
          field: 'customerName',
        },
        {
          headerName: '色号',
          field: 'colourNumber',
        },
        {
          headerName: '确认色',
          field: 'colorConfirmation',
        },
        {
          headerName: '布号',
          field: 'clothNumber',
        },
        {
          headerName: '品名',
          field: 'tradeName',
        },
        {
          headerName: '纱支',
          field: 'yarnCount',
        },
        {
          headerName: '纱批',
          field: 'yarnNumber',
        },
        {
          headerName: '坯布编号',
          field: 'grayCode',
        },
        {
          headerName: '坯布名称',
          field: 'grayName',
        },
        {
          headerName: '对色资料',
          field: 'coloringMatch',
        },
        {
          headerName: '复样加急',
          field: 'duplicateType',
          cellRenderer: {
            template: `<a-space>
                    <a-checkbox  :value="1"
                     :default-checked="duplicateType === 0 ? true : false" disabled :key="Math.random()"  />
                    </a-space>`,
            setup(props: any) {
              const { duplicateType } = props.params.data
              return {
                duplicateType,
              }
            },
          },
        },
        {
          headerName: '工艺类型',
          field: 'craftType',
        },
        {
          headerName: '建立人',
          field: 'createName',
        },
        {
          headerName: '建立时间',
          field: 'createTime',
        },
        {
          headerName: '修改人',
          field: 'updateName',
        },
        {
          headerName: '修改时间',
          field: 'updateTime',
        },
        {
          headerName: '操作',
          field: 'action',
          resizable: false,
          filter: false,
          sortable: false,
          lockPosition: 'right',
          width: '100',
          pinned: 'right',
          cellRenderer: {
            template: `<a-tag color="#ff7d00" @click="a" class="gesture">修改</a-tag>`,
            setup(props: any) {
              const a = () => {
                editHandler(props.params.data)
              }
              return {
                a,
              }
            },
          },
        },
      ]
      const total = ref(10)
      const changePage = (val: any) => {
        pagination.page = val
        doRefresh()
      }
      const changeSize = (val: any) => {
        pagination.pageSize = val
        doRefresh()
      }
      const pagination = usePagination(doRefresh)
      const localeTextData: any = ref(localeText)
      const table = useTable()

      /**
       * 打印
       */
      const vPrintClick = () => {
        printJS({
          printable: 'printCont',
          type: 'html',
          targetStyles: ['*'],
        })
      }
      return {
        headerShow,
        pagination,
        localeTextData,
        table,
        pageData,
        selectHandler,
        doRefresh,
        addHandler,
        cfsValue,
        dataForm,
        changePage,
        changeSize,
        total,
        defaultColDef,
        gridReady,
        editHandler,
        // searchHandler,
        selectAwait,
        dyBoufeiHandler,
        circumStatus,
        changeCircums,
        changHeadShow,
        saveHandler,
        vPrintClick,
        dataForm1,
      }
    },
  }
</script>
<style lang="less" scoped>
  .aInput {
    width: 270px;
    background: #fff;
    border: 1px solid #c9cdd3;
  }

  .printCont {
    text-align: center;

    .Head3 {
      font-size: 25px;
      font-weight: bold;
    }

    .secondTitle {
      display: flex;
      font-size: 18px;
      justify-content: center;
    }

    .headTop {
      margin-top: 20px;
    }

    .mytable {
      width: 100%;

      th,
      td {
        padding: 5px;
        border: 1px solid #e3e3e3;
      }

      th {
        background: rgb(247, 248, 250);
      }
    }
  }
</style>
